<template>
	<view class="pages">
		<div class="h" style="margin-top: 60rpx;">
			<div class="hItems" style="margin-right: 40rpx;" @click="$next('/pages/News/News',0)">
				<image  src="../../static/newsmodel4.png" mode="" style="width: 100%;height: 100%;"> </image>
				<view class="modeltitle">
					{{$t('AgentInterviews')}}
				</view>
			</div>
			<div class="hItems"  @click="$next('/pages/News/News',1)">
				<image  src="../../static/newsmodel1.png" mode="" style="width: 100%;height: 100%;"> </image>
				<view class="modeltitle">
					{{$t('TrendingNews')}}
				</view>
			</div>
		</div>
		<div class="h" style="margin-top: 200rpx;">
			<div class="hItems" style="margin-right: 40rpx;"  @click="$next('/pages/News/News',2)">
				<image  src="../../static/newsmodel2.png" mode="" style="width: 100%;height: 100%;"> </image>
				<view class="modeltitle">
					{{$t('InsuranceKnowledgeSharing')}}
				</view>
			</div>
			<div class="hItems"  @click="$next('/pages/News/News',3)">
				<image  src="../../static/newsmodel3.png" mode="" style="width: 100%;height: 100%;"> </image>
				<view class="modeltitle">
					{{$t('TOPActivities')}}
				</view>
			</div>
		</div>
	</view>
</template>

<script>
	export default {

	}
</script>

<style>
	.pages {
		width: 100vw;
		height: 100vh;
		background-color: #F0F0F0;
		overflow-y: auto;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.h {
		display: flex;
		width: 100%;
		height: 460rpx;
	}

	.hItems {
		width: 100%;
		height: 100%;
	}
	.modeltitle {
		text-align: center;
		margin-top: 10rpx;
		color: #273562;
		font-weight: 600;
	}
</style>